<template>
    <div>
        <transition :name="transitionName">
            <router-view class="child-view" :class="{'child-view-bot':$route.meta.footerVisible}"></router-view>
        </transition>
        <v-footer v-if="$route.meta.footerVisible"></v-footer>
    </div>
</template>
<script>
    import footer from '@/components/common/v-footer.vue'
    export default {
        name: 'pageTransition',
        data() {
            return {
                transitionName: 'slide-left'
            }
        },
        components:{
            'vFooter':footer,
        },
        beforeRouteUpdate(to, from, next) {
            let isBack = this.$router.isBack
            if (isBack) {
                this.transitionName = 'slide-right'
            } else {
                this.transitionName = 'slide-left'
            }
            this.$router.isBack = false
            next()
        }
    }
</script>
<style scoped>
    .child-view{position:absolute;transition:all .8s cubic-bezier(.55,0,.1,1);overflow-x: hidden;left:0;right:0;bottom:0;top:0;height:100%;width:100%;}
    .child-view.child-view-bot{padding-bottom: 50px;}
    .slide-left-enter,.slide-right-leave-active{opacity:0;-webkit-transform:translate(50px,0);transform:translate(50px,0)}
    .slide-right-enter,.slide-left-leave-active{opacity:0;-webkit-transform:translate(-50px,0);transform:translate(-50px,0)}
</style>